<template>
  <div class="component_root">
    <div class="fixed_container">
      <div class="section header_row">
        <div class="logo_wrapper">
          <NuxtLink to="/">
            <img
              class="logo"
              src="../assets/images/logo.png"
              alt="二师兄笔迹,logo,前端"
            />
          </NuxtLink>
        </div>
        <div class="right_row">
          <div class="search_card">
            <div class="input_wrapper">
              <input
                v-model.trim="keywords"
                class="input"
                type="text"
                placeholder="输入关键字搜索"
                @input="keywordChange"
                @blur="searchResultList.msg = ''"
              />
              <div v-if="keywords !== ''" class="clear" @click="clearKeywords">
                <svg
                  t="1612486885832"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4740"
                  width="48"
                  height="48"
                >
                  <path
                    d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-960a448 448 0 1 0 0 896 448 448 0 0 0 0-896z m45.454 448.17L693.02 647.738a32.028 32.028 0 0 1-45.283 45.283L512.17 557.454 375.637 693.988a32.256 32.256 0 0 1-45.568-45.682l136.534-136.534L330.98 376.263a31.972 31.972 0 1 1 45.283-45.283L511.83 466.546l137.5-137.5a32.256 32.256 0 1 1 45.626 45.624l-137.5 137.5z"
                    p-id="4741"
                    fill="#cdcdcd"
                  ></path>
                </svg>
              </div>
            </div>
            <div v-if="searchResultList.list.length" class="search_list">
              <div
                v-for="item in searchResultList.list"
                :key="item.id"
                class="item"
              >
                <div class="link" :title="item.name">
                  <NuxtLink :to="{ path: `/blog/${item.hash}` }">
                    {{ item.name }}
                  </NuxtLink>
                </div>
                <div class="time">{{ formatDate(item.created_at) }}</div>
              </div>
            </div>
          </div>

          <div class="tips_row">
            <div class="power">
              <span>Frontend Power By</span>
              <a
                href="https://nuxtjs.org/docs/2.x/get-started/installation"
                rel="nofollow"
              >
                Nuxt@2.14.12
              </a>
            </div>
            <div class="counter">
              Counter:
              <a href="javascript:void(0)">
                {{ counter }}
                <span class="zh">篇文章</span>
              </a>
            </div>
            <div class="open_source">
              Open Source :
              <a
                href="https://gitee.com/chinaliyun/codequan"
                rel="nofollow"
                target="_blank"
              >
                blog_server
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
    </div>
    <!-- <div class="section tab_list">
      <div v-for="item in folderDict" :key="item.id" class="tab">
        <div @click="changeCategory(item)">
          {{ item.name }}({{ item.nums }})
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { throttle } from '~/utils'
import http from '~/utils/http'
export default {
  data() {
    return {
      folderDict: [],
      keywords: '',
      searchResultList: {
        list: [],
      },
    }
  },
  async fetch() {
    try {
      const res = await http.get('/blog')
      if (res.code === 200) {
        this.$store.commit('changeCounter', res.data.total)
      }
    } catch (e) {}
  },
  computed: {
    ...mapState(['counter']),
  },
  methods: {
    formatDate(v) {
      return moment(v).format('YYYY-MM-DD HH:mm:ss')
    },
    keywordChange: throttle(function () {
      this.getFilterList()
    }, 500),
    clearKeywords() {
      this.keywords = ''
      this.searchResultList.list = []
      this.searchResultList.total = 0
    },
    async getFilterList() {
      if (!this.keywords.length) {
        this.searchResultList.list = []
        this.searchResultList.total = 0
        return
      }
      this.searchResultList.msg = '...'
      try {
        const res = await http.get('/blog', {
          params: {
            keywords: this.keywords,
          },
        })
        if (res.code !== 200 || res.data.list.length === 0) {
          this.searchResultList.msg = '没有找到相关文章'
          return false
        }
        if (res.data.list.length) {
          window.addEventListener('click', () => {
            this.keywords = ''
            this.searchResultList.list = []
            this.searchResultList.total = 0
          })
        }
        this.searchResultList.msg = ''
        this.searchResultList.list = res.data.list
        this.searchResultList.total = res.data.total
      } catch (e) {
        console.log(e)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.component_root {
  // padding-top: 124px;
  position: sticky;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  .fixed_container {
    background: url('~assets/images/page_bg.png');
    .header_row {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      padding: 10px 10px 10px 10px;
      > div {
        margin: 5px 0;
      }
      .logo {
        display: block;
        width: 320px;
        padding-right: 10px;
      }
      .tips_row {
        display: flex;
        align-items: center;
        font-size: 14px;
        .counter {
          margin-left: 10px;
          margin-right: 10px;
          .zh {
            font-size: 14px;
          }
        }
      }
      .search_card {
        position: relative;
        .input_wrapper {
          display: flex;
          position: relative;
          margin-bottom: 6px;
          .input {
            flex-grow: 1;
            border-color: $color-border;
            // &:focus {
            //   border-color: $color-border;
            // }
          }
          .clear {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            cursor: pointer;
            svg {
              display: block;
              height: 50%;
            }
          }
        }
        .search_list {
          background-color: white;
          position: absolute;
          top: 34px;
          left: 0;
          right: 0;
          z-index: 1;
          border: 1px solid rgba(116, 116, 116, 0.26);
          border-top: none;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          font-size: 14px;
          .item {
            display: flex;
            align-items: center;
            padding: 4px 10px;
            .link {
              flex-grow: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-right: 40px;
            }
            .time {
              flex-shrink: 0;
              width: 130px;
              font-size: 12px;
            }
          }
        }
      }
    }
    .line {
      height: 20px;
      background-color: rgba(0, 0, 0, 0.527);
    }
  }

  .tab_list {
    // display: flex;
    // border-bottom: 4px solid $color-border;
    display: flex;
    padding: 10px 10px 0 10px;
    align-items: center;
    // justify-content: space-between;
    flex-wrap: wrap;
    .tab {
      color: lighten($color-text, 20%);
      padding: 4px;
      // margin-right: 10px;
      cursor: pointer;
      transition: all 0.2s linear;
      // background-image: url('~assets/images/book.svg');
      // background-repeat: no-repeat;
      // background-position: left center;
      // background-size: 20px auto;
      // padding-left: 30px;
      // background-color: white;
      // text-decoration: underline;
      > div {
        display: inline-block;
        border-bottom: 1px solid #999;
      }
      &:hover {
        color: $color-text;
      }
      &.active {
        color: $color-text;
        font-weight: bold;
      }
    }
  }
}
</style>
